<!-- 广告列表 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="广告列表" name="one">
        <SearchTable :selectAdvertising="selectAdvertising" :selectBannerType="selectBannerType" v-model:formStatus="formStatus" ref="searchTableRef" @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="two">
        <FormTab :selectAdvertising="selectAdvertising" :selectBannerType="selectBannerType" :selectPlatformList="selectPlatformList" v-model:formStatus="formStatus" v-model:form="form" ref="formRef" @handleInitData="clearData" @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="advertisingInfo">
import SearchTable from "@/components/advertisingManager/advertisingInfo/SearchTable.vue";
import FormTab from "@/components/advertisingManager/advertisingInfo/FormTab.vue";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { TabsPaneContext } from "element-plus";
import { getBannerTypeInfo } from "@/utils/api/bannerType";
import type { IAdvertisingType, ISearchAdvertisingType } from "@/types/advertisingType";
import type { IDictData } from "@/types/dict";
import { useDictData } from "@/hooks/network/useDictData";
import type { IAdvertising, IAdvertisingDTO } from "@/types/advertisingInfo";

/* 表格状态 */
const formStatus = ref<ViewMode>("none");
const activeName = ref<TabsMode>("one");
/* 广告位置 */
const selectAdvertising = ref<Array<IDictData>>([]);
const selectPlatformList = ref<Array<IDictData>>([]);
/* 广告类型 */
const selectBannerType = ref<Array<IAdvertisingType>>([]);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
const formRef = ref<InstanceType<typeof FormTab>>();

const form = reactive<IAdvertisingDTO>({
  id: 0,
  sort: 0,
  image: "",
  goods_id: "",
  banner_type_id: "",
  banner_name: "",
  position: "",
  detail: "",
  platform_type: []
});

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}
/* 点击编辑按钮 */
function handleViewEdit(row: IAdvertising, code: ViewModeFilter) {
  formStatus.value = code;
  activeName.value = "two";
  /* nextTick 解决重置该表单项 初始化的数据问题 */
  nextTick(() => {
    form.id = row.id;
    form.banner_type_id = row.banner_type_id;
    form.banner_name = row.banner_name;
    form.position = row.position;
    form.image = row.image;
    form.goods_id = row.goods_id;
    form.platform_type = row.platform.map(item => item.platform);
    form.detail = row.detail;
    formRef.value?.editor?.txt.append(row.detail);
    form.sort = row.sort;
  });
}

/* 获取广告类型 */
function handlGetBannerTypeInfo() {
  getBannerTypeInfo<Array<IAdvertisingType>, ISearchAdvertisingType>()
    .then(res => {
      selectBannerType.value = res.result;
    })
    .finally(() => {});
}

let { getDictData } = useDictData();
getDictData("ADVERTISING", selectAdvertising);
getDictData("PLATFORM_TYPE", selectPlatformList);
handlGetBannerTypeInfo();
</script>

<style lang="scss" scoped></style>
